<template>
  <div class="eleItem">
    <!-- 输入框 -->
    <template v-if="eleItem.type === 'input'">
      <a-input v-model="eleItem.options.defaultValue" :maxLength="eleItem.options.maxlength" :allowClear="eleItem.options.allowClear" :placeholder="eleItem.options.placeholder"></a-input>
    </template>
    <!-- 文本域 -->
    <template v-if="eleItem.type === 'textarea'">
      <a-input type="textarea" v-model="eleItem.options.defaultValue" :maxLength="eleItem.options.maxlength" :placeholder="eleItem.options.placeholder" :autoSize="eleItem.options.autosize" :allowClear="eleItem.options.allowClear"></a-input>
    </template>
    <!-- 计数器 -->
    <template v-if="eleItem.type === 'number'">
      <a-input-number v-model="eleItem.options.defaultValue" :precision="setDefault0(eleItem.options.precision)" :placeholder="eleItem.options.placeholder" :min="eleItem.options.min" :max="eleItem.options.max" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " />
    </template>
    <!-- 文本 -->
    <template v-if="eleItem.type === 'text'">
      <div :style="{
          display: 'grid',
          'justify-content': eleItem.options.layout,
          'font-size': eleItem.options.size + 'px',
          color: eleItem.options.color,
          'line-height': eleItem.options.lineHeight + 'px',
          'font-weight': eleItem.options.weight,
        }">
        <div :style="{
            'padding-left': eleItem.options.leftPadding + 'px',
            'padding-right': eleItem.options.rightPadding + 'px',
            'padding-top':eleItem.options.topPadding + 'px',
            'font-style': eleItem.options.style,
            'text-indent': eleItem.options.indent + 'em',
          }" class="text">
          {{ eleItem.options.defaultValue }}
        </div>
      </div>
    </template>
    <!-- 时间选择器 -->
    <template v-if="eleItem.type === 'timePicker'">
      <a-time-picker :disabledHours="() => disabledCheck(eleItem.options.disabledHours)" :disabledMinutes="() => disabledCheck(eleItem.options.disabledMinutes)" :disabledSeconds="() => disabledCheck(eleItem.options.disabledSeconds)" :hour-step="timeStep(eleItem.options.hourStep)" :minute-step="timeStep(eleItem.options.minuteStep)" :second-step="timeStep(eleItem.options.secondStep)" :use12-hours="eleItem.options.hour12" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="eleItem.options.placeholder" :allowClear="eleItem.options.allowClear" :hideDisabledOptions="eleItem.options.hideDisabledOptions" :disabled="eleItem.options.disabled" />
    </template>
    <!-- 时间范围 -->
    <template v-if="eleItem.type === 'timeRangePicker'">
        <TimeRange :separator="eleItem.options.separator" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="[
          eleItem.options.placeholder.split(/,|，/)[0],
          eleItem.options.placeholder.split(/,|，/)[1],
        ]" :configs="eleItem.options.configs" />
    </template>
    <!-- 日期选择器 -->
    <template v-if="eleItem.type === 'datePicker'">
      <a-date-picker :disabled-date="disabledDate" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="eleItem.options.placeholder" :allowClear="eleItem.options.allowClear" :configs="eleItem.options.configs" />
    </template>
    <!-- 日期范围 -->
    <template v-if="eleItem.type === 'dateRangePicker'">
      <a-range-picker :separator="eleItem.options.separator" :disabled-date="disabledDate" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="[
          eleItem.options.placeholder.split(/,|，/)[0],
          eleItem.options.placeholder.split(/,|，/)[1],
        ]" :allowClear="eleItem.options.allowClear" :disabled="eleItem.options.disabled" />
    </template>
    <!-- 日期时间 -->
    <template v-if="eleItem.type === 'dateTimePicker'">
      <a-date-picker :show-time="{ format: eleItem.options.format.split(' ')[1] }" :disabled-date="disabledDate" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="eleItem.options.placeholder" :allowClear="eleItem.options.allowClear" :disabled="eleItem.options.disabled" />
    </template>
    <!-- 日期时间范围 -->
    <template v-if="eleItem.type === 'dateTimeRangePicker'">
      <a-range-picker :show-time="{ format: eleItem.options.format.split(' ')[1] }" :separator="eleItem.options.separator" :disabled-date="disabledDate" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        " v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="[
          eleItem.options.placeholder.split(/,|，/)[0],
          eleItem.options.placeholder.split(/,|，/)[1],
        ]" :allowClear="eleItem.options.allowClear" :disabled="eleItem.options.disabled" />
    </template>
    <!-- 单选框组 -->
    <template v-if="eleItem.type === 'radio'">
      <a-radio-group v-model="eleItem.options.defaultValue">
        <a-radio :style="eleItem.options.layout && vertical" :value="item.value" v-for="(item, index) in eleItem.options.options" :key="index">
          {{ item.label }}
        </a-radio>
      </a-radio-group>
    </template>
    <!-- 复选框组 -->
    <template v-if="eleItem.type === 'checkbox'">
      <a-checkbox-group v-model="eleItem.options.defaultValue">
        <template v-if="eleItem.options.layout">
          <a-col :span="24" v-for="(item, index) in eleItem.options.options" :key="index" class="pdt-10">
            <a-checkbox :value="item.value">
              {{ item.label }}
            </a-checkbox>
          </a-col>
        </template>
        <template v-else>
          <a-checkbox v-for="(item, index) in eleItem.options.options" :key="index" :value="item.value">
            {{ item.label }}
          </a-checkbox>
        </template>
      </a-checkbox-group>
    </template>
    <!-- 下拉框 -->
    <template v-if="eleItem.type === 'select'">
      <a-select :mode="eleItem.options.multip ? 'multiple' : 'default'" :showSearch="eleItem.options.showSearch" :showArrow="eleItem.options.showArrow" :notFoundContent="eleItem.options.notFoundContent" v-model="eleItem.options.defaultValue" :placeholder="eleItem.options.placeholder" :allowClear="eleItem.options.allowClear" :style="
          eleItem.options.width
            ? { width: eleItem.options.width + eleItem.options.unit }
            : {}
        ">
        <a-select-option :value="item.value" v-for="(item, index) in eleItem.options.options" :key="index">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </template>
    <!-- 层级选择器 -->
    <template v-if="eleItem.type === 'cascader'">
      <a-cascader :options="eleItem.options.options" :value="eleItem.options.defaultValue" :placeholder="eleItem.options.placeholder" />
    </template>
    <!-- 评分 -->
    <template v-if="eleItem.type === 'rate'">
      <a-rate v-model="eleItem.options.defaultValue" :tooltips="eleItem.options.tooltips.split(/，|,/)" :style="{ color: eleItem.options.color }" :allowClear="eleItem.options.allowClear" :allowHalf="eleItem.options.allowHalf" :count="eleItem.options.count">
        <a-icon v-if="!eleItem.options.diy" slot="character" :type="eleItem.options.character" :theme="eleItem.options.theme" />
        <span v-else slot="character">{{ eleItem.options.character }}</span>
      </a-rate>
      <span v-if="eleItem.options.text" class="ant-rate-text">{{
        eleItem.options.tooltips.split(/，|,/)[eleItem.options.defaultValue - 1]
      }}</span>
    </template>
    <!-- 分割线 -->
    <template v-if="eleItem.type === 'divider'">
      <DividerBar :title="eleItem.options.text" :noTitle="!eleItem.options.showText" :position="eleItem.options.position" :height="eleItem.options.height" :color="eleItem.options.color" :width="eleItem.options.width + eleItem.options.unit" />
    </template>
    <!-- 滑块 -->
    <template v-if="eleItem.type === 'slider'">
      <a-slider v-model="eleItem.options.defaultValue" :disabled="eleItem.options.disabled" :reverse="eleItem.options.reverse" :included="!eleItem.options.included" :step="eleItem.options.step" :min="eleItem.options.min" :max="eleItem.options.max" />
    </template>
    <!-- 附件上传 -->
    <template v-if="eleItem.type === 'fileUpload'">
      <a-upload name="file" :multiple="false" :disabled="eleItem.options.disabled" :action="eleItem.options.action" :accept="eleItem.options.fileType.join(',')">
        <a-button :disabled="eleItem.options.disabled">
          <a-icon type="upload" /> 上传
        </a-button>
        <p v-if="eleItem.options.hasTip" class="uoload-tip"><span v-if="eleItem.options.format">只能上传{{eleItem.options.fileType.join('/') || '限定'}}格式文件，</span><span>最多可上传{{eleItem.options.maxCount}}个文件</span></p>
      </a-upload>
    </template>
    <!-- 图文显示 -->
    <template v-if="eleItem.type === 'richText'">
      <div class="richText" v-html="eleItem.options.content"></div>
    </template>
    <!-- 地址 -->
    <template v-if="eleItem.type === 'address'">
      <a-cascader :disabled="eleItem.options.disabled" v-model="eleItem.options.defaultValue" :options="address" :placeholder="eleItem.options.placeholder" />
      <a-input :disabled="eleItem.options.disabled" v-if="eleItem.options.format == 2" v-model="eleItem.options.detail" placeholder="请输入详细地址"></a-input>
    </template>
  </div>
</template>
<script>
import moment from 'moment'
import { address } from '../address'
export default {
  name: 'formItems',
  props: ['eleItem'],
  data() {
    return {
      vertical: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      address
    }
  },
  methods: {
    moment,
    // 禁选项列表
    disabledCheck(data) {
      let time = []
      if (data) {
        time = /,|，/.test(data)
          ? data.split(/，|,/).map((item) => Number(item))
          : data
      }
      return time
    },
    // 禁选项列表
    disabledDate(current) {
      switch (this.eleItem.options.dateRangeType) {
        case 'before':
          return current && current > moment().endOf('day')
        case 'after':
          return current && current < moment().endOf('day')
        case 'diy':
          return (
            current &&
            (current < moment(this.eleItem.options.dateRange[0]).valueOf() ||
              current > moment(this.eleItem.options.dateRange[1]).valueOf())
          )
        default:
          return ''
      }
    },
    // 默认为0
    setDefault0(data) {
      let num = 0
      if (data) {
        num = data
      }
      return num
    },
    // 时间间隔
    timeStep(data) {
      let time = 1
      if (data) {
        time = data
      }
      return time
    }
  }
}
</script>
<style lang="less" scoped>
.eleItem {
  .upload-tip {
    font-size: 12px;
    color: #606266;
  }
  .text{
      white-space: pre-wrap;
      word-break: break-word;
      line-height: normal;
  }
  .richText {
    /deep/p {
      white-space: pre-wrap;
      word-break: break-word;
      line-height: normal;
    }
    img {
      max-width: 100%;
    }
  }
}
</style>
